<!DOCTYPE html>
<!--[if IE 7]> <html lang="en" class="ie7"> <![endif]-->  
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->  
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->  
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]--> 
  <head>
    
    <!-- Meta -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap 101 Template</title>

    <!-- Css Bootstrap plugin -->
    <link href="assets/plugins/bootstrap-3.2.0/css/bootstrap.min.css" rel="stylesheet" />
    
    <!-- Css Font awesome plugin -->
    <link href="assets/plugins/font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" />
    
    <!-- Custom style -->    
    <link href="assets/css/style.css" rel="stylesheet" />
        
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <!-- header -->
    
    <div class="hpcus-top"><!-- top -->
        <div class="container">
            <div class="row">
                <div class="col-sm-12 col-md-12 hp-cus-topbar">
                    <ul class="topbar pull-right">
                        <li><!-- language -->
                            <i class="fa fa-flag-checkered"></i>
                            <a data-toggle="modal" data-target=".bs-example-modal-sm" >Languages</a>
                            <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
                              <div class="modal-dialog modal-sm">
                                <div class="modal-content">
                                    <div class="list-group">
                                      <a href="#" class="list-group-item active">English</a>
                                      <a href="#" class="list-group-item">Spanish</a>
                                      <a href="#" class="list-group-item">Russian</a>
                                      <a href="#" class="list-group-item">German</a>
                                    </div>
                                </div>
                              </div>
                            </div>                        
                        </li><!-- end language -->   
                        <li class="line-vertical">&nbsp;</li>
                        <li><a class="login-btn" href="register.html">Signup</a></li>  
                        <li class="line-vertical">&nbsp;</li>
                        <li><a class="login-btn" href="login.html">Login</a></li>
                        <li class="line-vertical">&nbsp;</li>
                        <li>
                            <i class="fa fa-shopping-cart"></i>
                            <a class="login-btn" href="#" data-toggle="modal" data-target=".bs-cart-modal-sm" >
                                <span class="badge">4 Items</span>
                            </a>
                            <div class="modal fade bs-cart-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
                              <div class="modal-dialog modal-sm">
                                <div class="modal-content">
                                    <div class="list-group">
                                      <a href="#" class="list-group-item">Items 1</a>
                                      <a href="#" class="list-group-item">Items 2</a>
                                      <a href="#" class="list-group-item">Items 3</a>
                                      <a href="#" class="list-group-item">Items 4</a>
                                    </div>
                                </div>
                              </div>
                            </div>                        
                        </li>
                    </ul>               
                </div>
            </div>
        </div>
    </div><!-- end top -->
    
    <div class="hp-clear-fix"></div>
    
    <div class="hpcus-header"><!-- content header -->
        <div class="container">
            <div class="row hpcus-row-navbar">
                <div class="col-sm-2 col-md-2">
                    <h1 class="fix-center cus-top-h1"><!-- logo -->
                        <img src="assets/img/logo.png" />
                    </h1><!-- end logo -->
                </div>
                <div class="col-sm-10 col-md-10">
                
                    <!-- menu top -->
                    <nav class="navbar navbar-default hpcus-navbar" role="navigation">
                      <div class="container-fluid">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                          </button>
                          <a class="navbar-brand" href="#"></a>
                        </div>
                    
                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                          <ul class="nav navbar-nav">
                            <li class="dropdown">
                                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home <span class="caret"></span></a>
                                  <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">Home I</a></li>
                                    <li><a href="#">Home II</a></li>
                                    <li><a href="#">Home III</a></li>
                                    <li><a href="#">Home IV</a></li>
                                  </ul>
                            </li>
                            <li class="dropdown">
                                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Account <span class="caret"></span></a>
                                  <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">My Account</a></li>
                                    <li><a href="#">Edit Profile</a></li>
                                    <li><a href="#">Login</a></li>
                                    <li><a href="#">Singup</a></li>
                                  </ul>                            
                            </li>
                            <li class="dropdown">
                              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Page <span class="caret"></span></a>
                              <ul class="dropdown-menu" role="menu">
                                <li><a href="#">About Us</a></li>
                                <li><a href="#">404 page</a></li>
                                <li><a href="#">FAQ</a></li>
                                <li><a href="#">Support</a></li>
                                <li><a href="#">Search Result</a></li>
                                <li><a href="#">Single Product</a></li>
                                <li><a href="#">Typography</a></li>
                                <li><a href="#">Gallery</a></li>                                
                              </ul>
                            </li>
                            <li class="dropdown">
                              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products <span class="caret"></span></a>
                              <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Dresses</a></li>
                                <li><a href="#">Tops</a></li>
                                <li><a href="#">Playsuits & Jumpsuits</a></li>
                                <li><a href="#">Coats & Jackets</a></li>
                                <li><a href="#">Jumpers & Cardigans</a></li>
                                <li><a href="#">Skirts</a></li>
                                <li><a href="#">Shorts</a></li>
                                <li><a href="#">Swimwear</a></li>
                              </ul>
                            </li>
                            <li class="dropdown">
                              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Features <span class="caret"></span></a>
                              <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Animation Image</a></li>
                              </ul>
                            </li>                        
                            <li class="dropdown">
                              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Blog <span class="caret"></span></a>
                              <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Blog Full Width</a></li>
                                <li><a href="#">Blog Amazing</a></li>
                                <li><a href="#">Blog Left sidebar</a></li>
                                <li><a href="#">Blog Right sidebar</a></li>
                                <li><a href="#">Blog Single</a></li>
                              </ul>
                            </li>
                            <li class="dropdown">
                              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Contact <span class="caret"></span></a>
                              <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Contact Full Width</a></li>
                                <li><a href="#">Contact Map</a></li>
                                <li><a href="#">Contact Left sidebar</a></li>
                                <li><a href="#">Contact Right sidebar</a></li>
                              </ul>
                            </li>                                                                       
                          </ul>
    
                        </div><!-- /.navbar-collapse -->
                      </div><!-- /.container-fluid -->
                    </nav>
                                    
                    <!-- end menu top -->           
                </div>
            </div>
        </div>
        <div class="hpcus-header-bottom"></div>
    </div><!-- content header -->   
      
    <!-- end header -->
    
    <!-- slide show -->
    <!--
    data-lazy-src: image url
    data-lazy-background: slide background url
    -->
    <div class="container-fluid">
        <div class="row">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
              <!-- Indicators -->
              <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
              </ol>   
               <!-- Carousel items -->
               <div class="carousel-inner">
                  <div class="item active">
                     <img src="assets/img/back1.jpg" alt="First slide" />
                     <div class="carousel-caption">This Caption 1</div>
                  </div>
                  <div class="item">
                    <img src="assets/img/back2.jpg" alt="First slide" />
                     <div class="carousel-caption">This Caption 2</div>
                  </div>
                  <div class="item">
                     <img src="assets/img/back3.jpg" alt="First slide" />
                     <div class="carousel-caption">This Caption 3</div>
                  </div>
               </div>
               <!-- Carousel nav -->
               <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
               <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
            </div>                     
        </div>
    </div> 
    <!-- end slide show
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="assets/js/jquery-1.11.1.min.js"></script>   
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="assets/plugins/bootstrap-3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>